<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<%@include file="header.jsp" %>
		<script src="resources/js/popup.js" type="text/javascript"></script>  
		<script>
        function doAjaxPost() {
        	
            var productRemove = $('input[name="productRemove"]:checked').serialize();

            $.ajax({
            type: "POST",
            url: "removeProduct",
            data: "productRemove=" + productRemove,
            success: function(response){
            $('#popup').html(response);
            
          	//scrolling to top
	        $('html, body').animate({scrollTop:0}, '400');
			//centering with css
			centerPopup();
			//load popup
			loadPopup();
			
			$("#popupContactClose").click(function(){
				disablePopup();
			});
			//Click out event!
			$("#backgroundPopup").click(function(){
				disablePopup();
			});
			//Press Escape event!
			$(document).keypress(function(e){
				if(e.keyCode==27 && popupStatus==1){
					disablePopup();
				}
			});
            
            },
            error: function(e){
            alert('Error: ' + e);
            }
            });
            }
		</script>
	</head>
	<body>
		<div id="wrapper">
			<div id="splash">
				<img src="resources/images/pic1.jpg" alt="" />
			</div>
			<div id="menu">
				<ul>				
					<li><a href="index">Homepage</a></li>
					<li><a href="notebooks">Notebooks</a></li>
					<li>Account <span class="arrow"></span>
						<ul>
							<c:choose>
								<c:when test="${ firstname != null }">
									<li class="first"><a href="logout">Logout</a></li>
								</c:when>
								<c:when test="${ firstname == null}">
									<li class="first"><a href="login">Inloggen</a></li>
									<li><a href="registratie">Registreren</a></li>
								</c:when>
							</c:choose>	
						</ul>
					</li>
					<li><a href="about">About</a></li>
					<c:choose>
						<c:when test="${ admin == 0 || admin == null }">
							<li class ="cartI"> <img src="resources/images/shopping_cart.png" alt="" /></li>
							<li class ="cart"><a href="winkelwagen">Winkelwagen</a></li>
						</c:when>
						<c:when test="${ admin == 1 }">
							<li class ="cartI"> <img src="resources/images/adminmodule.png" alt="" /></li>
							<li class ="cart"><a href="admin">Admin module</a></li>
						</c:when>
					</c:choose>		
				</ul>				
				<br class="clearfix" />
			</div>
			<div id="page">
				<div id="content">
					<div class="box">
						<h1>Product verwijderen</h1>
						<br/>
						<!-- <form id="removeProduct" onsubmit="return false">  -->
							<table class="specList" cellspacing="0" >
								<c:forEach items="${products}" var="product">								
									<tr><th colspan="2" >${product.name}<div class="floatRight">Verwijderen: <input type="checkbox" name="productRemove" value="${product.EAN_UCC_13}"/></div></th></tr>
										<tr>
											<td>
												Prijs:<br/>
												Processor:<br/>
												Grafische kaart:<br/>
												Opslag:<br/>
												Geheugen:<br/>
											</td>
											<td>
												${product.price}
												<br/>
												<c:set var="counter" value="0" />
												<c:forEach items="${cpu}" var="Cpu">
													<c:if test="${product.cpu_id == Cpu.cpu_id}">
														${Cpu.name} ${Cpu.CPUSpeed}
														<c:set var="counter" value="${counter + 1}" />
													</c:if>
												</c:forEach>
												<c:if test="${counter == 0}">
													<br/>
												</c:if>
												<c:set var="counter" value="0" />
												<br/>
												<c:forEach items="${graph}" var="GraphicsCard">
													<c:if test="${product.graphC_id == GraphicsCard.graphC_id}">
														${GraphicsCard.name}
														<c:set var="counter" value="${counter + 1}" />
													</c:if>
												</c:forEach>
												<c:if test="${counter == 0}">
													<br/>
												</c:if>
												<c:set var="counter" value="0" />
												<br/>
												<c:forEach items="${hdd}" var="InternalHD">
													<c:if test="${product.intHD_id == InternalHD.intHD_id}">
														${InternalHD.manufacturer} ${InternalHD.capacityOfStorage}GB
														<c:set var="counter" value="${counter + 1}" />
													</c:if>
												</c:forEach>
												<c:if test="${counter == 0}">
													<br/>
												</c:if>
												<c:set var="counter" value="0" />
												<br/>
												<c:forEach items="${ramInProduct}" var="RamInProduct">
													<c:if test="${product.EAN_UCC_13 == RamInProduct.EAN_UCC_13}">
														<c:forEach items="${ram}" var="Ram">
															<c:if test="${RamInProduct.ram_id == Ram.ram_id}">
																${Ram.memoryCapacity} ${Ram.version}
																<c:choose>
																	<c:when test="${RamInProduct.number > 1}">(${RamInProduct.number} modules)</c:when>
																	<c:when test="${RamInProduct.number == 1}">(${RamInProduct.number} module)</c:when>
																</c:choose>
																<c:set var="counter" value="${counter + 1}" />
															</c:if>
														</c:forEach>
													</c:if>
												</c:forEach>	
												<c:if test="${counter == 0}">
													<br/>
												</c:if>
												<c:set var="counter" value="0" />
											</td>
										</tr>
								</c:forEach>
								<tr><th colspan="2" >
									<div class="floatRight">
										<button class="submit" name="btnRemove" onclick="doAjaxPost()" value="btnRemove">Product(en) verwijderen</button>
									</div>
								</th></tr>
							</table>
						<!-- </form>  -->
					</div>
					<br class="clearfix" />
				</div>							
				<div id="sidebar">
					<div class="box" >
						<h3>Mijn Account</h3>
						<c:choose>
							<c:when test="${firstname != null}">
								Welkom, <a href="account" ><c:out value="${firstname}"></c:out></a>
							</c:when>
							<c:when test="${firstname == null}">
								Log nu in !
							</c:when>
						</c:choose>
					</div>
					<div class="box">
						<h3>contact</h3>
						<p>
							Neem contact op door <a href="mailto:info@notebookshop.com">hier</a> te klikken.							
						</p>
					</div>
				</div>
				<br class="clearfix" />
			</div>
		</div>
		<div id="footer">			
		</div>
		<div id="popup">
		</div>
	</body>
</html>